<template>
  <view class="main">
    <view class="box">
      <view class="des">认证信息仅用于验证身份真实性，我们承诺不会像任何人透露你的个人信息</view>
      <up-input v-model="formData.realName" placeholder="请输入本人姓名" border="bottom" color="#333" placeholder-style="color:#8A8A8D"> </up-input>
      <up-input v-model="formData.cardNo" placeholder="请输入身份证号码" border="bottom" color="#333" placeholder-style="color:#8A8A8D"> </up-input>
    </view>
    <view class="des" style="text-align: center; margin: 40rpx 0">拍摄/上传您的身份证人像面</view>
    <view class="imgBox">
      <image :src="formData.idCardFrontImg ? formData.idCardFrontImg : '../../static/my/zm.png'" @click="uploadImg('idCardFrontImg')" mode="aspectFill" />
      <image :src="formData.idCardBackImg ? formData.idCardBackImg : '../../static/my/bm.png'" @click="uploadImg('idCardBackImg')" mode="aspectFill" />
    </view>
    <view class="bottomBox">
      <u-button
        :text="formData.status == '0' ? '审核中' : formData.status == '1' ? '已通过' : formData.status == '2' ? '已拒绝' : '立即申请'"
        @click="saveSubmit"
        shape="circle"
        color="#81d8d0"
      ></u-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { BASE_UPLOADURL } from "@/utils/request";
import { onMounted, ref } from "vue";
onMounted(async () => {
  // const res = await authenticationInfo();
  // if (res.data) {
  //   formData.value = res.data;
  // }
});
const formData = ref({
  realName: "",
  cardNo: "",
  idCardFrontImg: "",
  idCardBackImg: "",
  status: "",
});
const saveSubmit = async () => {
  let errorMessage = "";
  console.log(formData.value);
  if (!formData.value.realName) {
    errorMessage = "姓名不能为空";
  } else if (!formData.value.cardNo || !uni.$u.test.idCard(formData.value.cardNo)) {
    errorMessage = "请正确填写身份证号";
  } else if (!formData.value.idCardFrontImg) {
    errorMessage = "请上传身份证正面照片";
  } else if (!formData.value.idCardBackImg) {
    errorMessage = "请上传身份证反面照片";
  } else {
    errorMessage = "";
  }
  if (errorMessage) {
    // 显示错误消息
    uni.$u.toast(errorMessage);
  } else {
    // await addAuthentication(formData.value);
    uni.navigateBack();
  }
};
const uploadImg = (imgUrl: "idCardFrontImg" | "idCardBackImg") => {
  if (formData.value?.status) {
    return;
  }
  uni.chooseImage({
    count: 1, //默认9
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者打开相机
    success: function (res) {
      let tempFilePaths = res.tempFilePaths;
      for (let i = 0, len = tempFilePaths.length; i < len; i++) {
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: tempFilePaths[i],
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            formData.value[imgUrl] = JSON.parse(uploadFileRes.data).data;
          },
        });
      }
    },
  });
};
</script>

<style lang="less" scoped>
.box {
  background: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}
.des {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
}
:deep(.u-border-bottom) {
  border-color: #f3f4f6 !important;
}
.imgBox {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 30rpx;
  gap: 10px;
  image {
    width: 346rpx;
    height: 212rpx;
  }
}
:deep(.u-input) {
  padding: 30rpx 8rpx !important;
}
</style>
